package com.dana.basicscodelab

import android.content.res.Configuration
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.core.Spring
import androidx.compose.animation.core.animateDpAsState
import androidx.compose.animation.core.spring
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.Button
import androidx.compose.material3.ElevatedButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.dana.basicscodelab.ui.theme.BasicsCodelabTheme
import android.content.res.Configuration.UI_MODE_NIGHT_YES
import androidx.compose.ui.res.stringResource

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            BasicsCodelabTheme {
                // A surface container using the 'background' color from the theme
//                Surface(
//                    modifier = Modifier.fillMaxSize(),
//                    color = MaterialTheme.colorScheme.background
//                ) {
//                    Greeting("Android")
//                }

                MyApp(modifier = Modifier.fillMaxSize())
            }
        }
    }
}

/**
 * 添加到界面的组件越多，创建的嵌套层级就越多。如果函数变得非常大，可能会影响可读性。
 * 通过创建可重用的小型组件，
 * 可以轻松构建应用中所用界面元素的库。每个组件对应于屏幕的一个部分，可以单独修改
 */
@Composable
fun MyApp(modifier: Modifier=Modifier){
//    var shouldShowOnboarding by remember { mutableStateOf(true) }
    var shouldShowOnboarding by rememberSaveable { mutableStateOf(true) }
//    Greetings()
    Surface(modifier) {
        if (shouldShowOnboarding){
            OnboardingScreen(onContinueClicked = {shouldShowOnboarding = false})
        }else{
            Greetings()
        }
    }
//        Column(modifier=modifier.padding(vertical = 4.dp)) {
//            for (name in names){
//                Greeting(name = name)
//            }
//        }



}


@Composable
fun Greetings(modifier: Modifier=Modifier,
//fun Greetings(modifier: Modifier=Modifier,names:List<String> = listOf("World","Compose")) {
              names: List<String> = List(1000) { "$it" }
) {
/*    Column(modifier = modifier.padding(vertical = 4.dp)) {
        for (name in names){
            Greeting(name = name)
        }
    }*/

    LazyColumn(modifier = modifier.padding(vertical = 4.dp)) {
        items(items=names){
            name ->
            Greeting(name = name)
        }
    }
}
@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
//    var expanded = false //此设置无法按预期发挥作用。为 expanded 变量设置不同的值不会使 Compose 将其检测为状态更改，因此不会产生任何效果。
//    val expanded = mutableStateOf(false) // Don't do this!
    var expanded by rememberSaveable { mutableStateOf(false) }
//    val expandedPadding = if (expanded) 48.dp else 0.dp
    val expandedPadding by animateDpAsState(
        if (expanded) 48.dp else 0.dp, label = "",
        animationSpec = spring(
            dampingRatio = Spring.DampingRatioMediumBouncy,
            stiffness = Spring.StiffnessLow
        )
    )
    Surface(
        color = MaterialTheme.colorScheme.primary,
        modifier = modifier.padding(vertical = 4.dp, horizontal = 8.dp)
    ) {
        //嵌套在 Surface 内的组件将在该背景颜色之上绘制
        //修饰符在 Compose 中使用得非常广泛，现在我们来练习更高级的用法：尝试使用 fillMaxWidth 和 padding 修饰符复制以下布局
       Row(modifier=Modifier.padding(24.dp)){
//           Column(modifier=modifier.fillMaxWidth().padding(24.dp)) {
           Column(modifier=modifier.weight(1f)
//               .padding(bottom = expandedPadding)) {
               .padding(bottom = expandedPadding.coerceAtLeast(0.dp))) {
               Text( text = "Hello")
               Text(text = name,style = MaterialTheme.typography.headlineLarge
                   .copy( fontWeight = FontWeight.ExtraBold))
           }
           ElevatedButton(onClick = {expanded = !expanded}){
               Text( if (expanded) stringResource(R.string.show_less) else stringResource(R.string.show_more))

           }
       }
//        Text(
//            text = "Hello $name!",
//            //有数十种修饰符可用于实现对齐、添加动画、设置布局、使可点击或可滚动以及转换等效果。有关完整列表，请查看 Compose 修饰符列表。
//            modifier = modifier.padding(24.dp)
//            //https://developer.android.com/jetpack/compose/modifiers-list?hl=zh-cn
//        )

    }

}

@Preview(showBackground = true,widthDp = 320)
@Composable
fun GreetingPreview() {
    BasicsCodelabTheme {
        MyApp()
    }
}

@Composable
fun OnboardingScreen(modifier: Modifier=Modifier,
    //通过向下传递回调来传递。回调是这样一类函数，它们以实参的形式传递给其他函数，并在事件发生时执行。
                     onContinueClicked:()->Unit
                     ){

    Column(
        modifier = modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Welcome to the Basics Codelab!")
        Button(
            onClick = onContinueClicked,
            modifier = Modifier.padding(vertical = 24.dp)
        ){
            Text("Continue")
        }
    }
}
@Preview(showBackground = true, widthDp = 320, heightDp = 320)
@Composable
fun OnboardingPreview() {
    BasicsCodelabTheme {
        OnboardingScreen(onContinueClicked = {})
    }
}

@Preview
@Composable
fun MyAppPreview(){
    BasicsCodelabTheme {
        MyApp(Modifier.fillMaxSize())
    }
}

/*
@Preview(
    showBackground = true,
    widthDp = 320,
    uiMode = Configuration.UI_MODE_NIGHT_YES,
    name = "GreetingPreviewDark"
)
@Preview(showBackground = true, widthDp = 320)
@Composable
fun GreetsPriview(){
    BasicsCodelabTheme {
        Greetings()
    }
}*/


@Preview(
    showBackground = true,
    widthDp = 320,
    uiMode = UI_MODE_NIGHT_YES,
    name = "GreetingPreviewDark"
)
@Preview(showBackground = true, widthDp = 320)
@Composable
fun GreetingsPreview() {
    BasicsCodelabTheme {
        Greetings()
    }
}